<!--
@name:dialogTheme
@author:Zhenglei
@date:16:56
@description:dialogTheme
@update:2022/8/2516:56
-->
<template>
  <el-dialog :title="title"
             :visible.sync="visible"
             :before-close="modalClose"
             :append-to-body="true"
             :close-on-click-modal="false"
             :close-on-press-escape="false"
             width="60%">
    <el-form :model="subData"
             label-position="right"
             label-width="150px"
             ref="formModelRef"
             :rules='formModelRules'>
      <el-form-item label="主题名称：" prop="dolThemeName">
        <el-input v-model="subData.dolThemeName" class="w-300" placeholder="请输入主题名称" clearable/>
      </el-form-item>
      <el-form-item label="性别：" class="is-required">
        <el-select v-model="subData.genderMode"
                   class="w-300"
                   placeholder="请选择性别">
          <el-option v-for="item in sexData"
                     :key="item.id"
                     :label="item.name"
                     :value="item.id">
          </el-option>
        </el-select>

      </el-form-item>
      <el-form-item label="填写或设备检测：" class="is-required">
        <el-button type="primary"
                   @click="handleOption('addConfig',null,null)">新 增
        </el-button>
      </el-form-item>
      <el-form-item>
        <element-table
          :columns="columns"
          :data="subData.inputs">
          <template v-slot:option="{row,index}">
            <el-button type="primary"
                       @click="handleOption('editConfig',index, row)">编辑
            </el-button>
            <el-button type="danger"
                       @click="handleOption('delConfig',index, row)">删除
            </el-button>
          </template>
        </element-table>
      </el-form-item>
      <el-form-item label="关联指征：" class="is-required">
        <el-button type="primary"
                   @click="handleOption('addPoint',null,null)">新 增
        </el-button>
      </el-form-item>

      <el-form-item>
        <element-table
          :columns="columns1"
          :data="subData.indications">
          <template v-slot:option="{row,index}">
            <el-button type="primary"
                       @click="handleOption('editPoint',index, row)">编辑
            </el-button>
            <el-button type="danger"
                       @click="handleOption('delPoint',index, row)">删除
            </el-button>
          </template>
        </element-table>
      </el-form-item>


    </el-form>
    <p align="center">
      <el-button @click="modalClose"
                 type="info">取 消
      </el-button>
      <el-button type="primary"
                 v-prevent-re-click
                 @click="handleOption('save',null, null)">保 存
      </el-button>
    </p>
    <dialog-theme-config v-if="showConfigDialog" :visible.sync="showConfigDialog" :configDataObj="configDataObj"
                         @handleConfigResultData="handleConfigResultData"/>
    <dialog-theme-point v-if="showPointDialog" :visible.sync="showPointDialog" :pointDataObj="pointDataObj"
                        @handlePointResultData="handlePointResultData"/>
  </el-dialog>
</template>

<script>
import ElementTable from "../../../../base/ElementTable";
import dialogThemeConfig from "./dialogThemeConfig";
import dialogThemePoint from "./dialogThemePoint";

export default {
  name: "dialogPointer",
  props: {
    dataObj: {
      type: Object,
      default: {}
    },
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      subData: {
        id: null,
        dolThemeName: '',
        genderMode: 0,
        inputs: [],
        indications: []
      },
      sexData: [
        {
          id: 0,
          name: '不限'
        },
        {
          id: 1,
          name: '男'
        },
        {
          id: 2,
          name: '女'
        }
      ],
      showConfigDialog: false,
      showPointDialog: false,
      configDataObj: {},
      pointDataObj: {},
      title: '新 增',
      isEdit: false,
      configIndex: 0,
      pointIndex: 0,
      columns: [
        {
          label: '类型',
          prop: 'type',
          align: 'center',
          formatter: (row, cellValue) => {
            if (row.type === 1) return '手动填写'
            if (row.type === 2) return '量表'
            if (row.type === 3) return '检测项目'
            if (row.type === 4) return '条件判断'
          },
        }, {
          label: '检测项目',
          prop: 'deviceName',
          align: 'center',
          formatter: (row, cellValue) => {
            return row.deviceName ? row.deviceName : '--'
          },
        }, {
          label: '关联内容',
          prop: 'content',
          align: 'center'
        }, {
          label: '是否必填',
          prop: 'isMust',
          align: 'center',
          formatter: (row, cellValue) => {
            if (row.isMust === 1) return <el-tag type="success">是</el-tag>
            if (row.isMust === 0) return <el-tag type="danger">否</el-tag>
          },
        }, {
          label: '排序',
          prop: 'sort',
          align: 'center'
        }, {
          label: '操作',
          prop: 'option',
          align: 'center',
          isSlot: true
        }
      ],
      columns1: [
        {
          label: '类型',
          prop: 'indicationType',
          align: 'center',
          formatter: (row, cellValue) => {
            if (row.indicationType === 4) return '手动填写'
            if (row.indicationType === 2) return '量表'
            if (row.indicationType === 3) return '检测项目'
            // if (row.indicationType === 4) return '条件判断'
          },
        }, {
          label: '指征名称',
          prop: 'indicationName',
          align: 'center',

        }, {
          label: '排序',
          prop: 'sort',
          align: 'center'
        }, {
          label: '操作',
          prop: 'option',
          align: 'center',
          isSlot: true
        }
      ],
      formModelRules: {
        dolThemeName: [{required: true, message: '请输入主题名称', trigger: 'blur'},],
      }
    }
  },
  created() {
    if (this.dataObj.id) {
      this.title = '编 辑'
      this.isEdit = true
      this.getDetail()
    } else {
      this.title = '新 增'
      this.isEdit = false
    }

  },
  methods: {
    modalClose() {
      this.$emit('update:visible', false);
    },
    handleOption(op, index, row) {
      switch (op) {
        case 'addConfig':
          this.configDataObj = {}
          this.isEdit = false
          this.showConfigDialog = true
          break;
        case 'editConfig':
          this.configDataObj = row
          this.isEdit = true
          this.configIndex = index
          this.showConfigDialog = true
          break;
        case 'delConfig':
          this.subData.inputs.splice(index, 1)
          break
        case 'addPoint':
          this.pointDataObj = {}
          this.isEdit = false
          this.showPointDialog = true
          break
        case 'editPoint':
          this.pointDataObj = row
          this.isEdit = true
          this.pointIndex = index
          this.showPointDialog = true
          break
        case 'delPoint':
          this.subData.indications.splice(index, 1)
          break
        case 'save':
          this.$refs.formModelRef.validate(valid => {
            if (valid) {
              if (this.subData.inputs.length === 0) {
                this.$message.warning('至少增加一个配置')
              } else if (this.subData.indications.length === 0) {
                this.$message.warning('至少增加一个关联指征')
              } else {
                this.post(this.api.healthMap.saveDolTheme, this.subData).then((res) => {
                  if (res.data.code === '200') {
                    this.$message.success('更新成功!');
                    this.$parent.getList();
                    this.modalClose();
                  }
                })
              }
            }
          })

          break

      }

    },
    //查询详情
    getDetail() {
      this.post(this.api.healthMap.getDolThemeDetail, {
        id: this.dataObj.id
      }).then((res) => {
        if (res.data.code === '200') {
          this.subData = Object.assign(this.subData, res.data.object)
          this.subData.inputs.forEach(e => {
            if (e.type === 1) {
              this.$set(e, 'content', e.indexName)
            } else if (e.type === 2) {
              this.$set(e, 'content', e.scaleName)
            } else if (e.type === 3) {
              this.$set(e, 'content', e.referenceName)
            } else if (e.type === 4) {
              this.$set(e, 'content', e.conditionName)
            }
          })
          this.subData.indications = this.subData.indications.map(item => item.indication)
          this.subData.indications.forEach(e => {
            this.$set(e, 'indicationId', e.id)
          })

        }
      })
    },
    //配置
    handleConfigResultData(data) {
      if (this.isEdit) {
        this.$set(this.subData.inputs, this.configIndex, data)
      } else {
        this.subData.inputs.push(data)
      }
    },
    //指征
    handlePointResultData(data) {
      if (this.isEdit) {
        this.$set(this.subData.indications, this.pointIndex, data)
      } else {
        this.subData.indications.push(data)
      }
    },


  },
  components: {
    'element-table': ElementTable,
    'dialog-theme-config': dialogThemeConfig,
    'dialog-theme-point': dialogThemePoint,
  }
}
</script>

<style scoped>

</style>


